{extend name="public/base"}

{block name="title"}就行天下-个人中心{/block}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/home/css/index.css" />
{js href="__STATIC__/home/css/jquery.jcrop.min.css" /}
<style>
    .refundDetail-img .viewPhone {
        margin-right: 10px;
        height: 2.8rem;
    }
</style>
{/block}


{block name="main"}
<div class="pageControl discuss">
    <div class="main-top"></div>
    <div class="msui_nav msui_navTop">
        <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
        <h1 class="msui_navTop-title">评论</h1>
    </div>
    <form style="background: #eee; padding-top: 1px;">
        {volist name="data.products" id="vo"}
        <div style="margin: 5px 0" class="product" data-id="{$vo.id}">
            <div class="weui-cell discuss-face">
                <div class="weui-cell__hd">
                    <img src="{$vo.image}" alt="">
                </div>
                <div class="weui-cell__bd" style="display: initial;">
                    <p>{$vo.name}</p>
                    <div class="weui-cell__bd level" style="padding-left: 0">
                        <a href="1" class="active" data-level="1">
                            <i class="icon iconfont icon-weibiaoti1"></i>
                            <span>好评</span>
                        </a>
                        <a href="2" data-level="2">
                            <i class="icon iconfont icon-weibiaoti11"></i>
                            <span>中评</span>
                        </a>
                        <a href="3" data-level="3">
                            <i class="icon iconfont icon-weibiaoti12"></i>
                            <span>差评</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="weui-cells weui-cells_form" style="margin-top: 0;">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea js-textarea fs065" name="content" placeholder="宝贝满足您的期待吗？说说它的优点和美中不足的地方吧" rows="4"></textarea>
                    </div>
                </div>
                <div class="weui-cell bg-fff noBorder">
                    <div class="weui-cell__bd">
                        <div class="refundDetail-img viewImage">
                            <!--<a href=""><img class="viewPhone" data-img="0" src="__STATIC__/home/images/product1.png" alt="__STATIC__/home/images/product1.png"></a>-->
                            <a href="" class="refundDetail-img_last" style="position: relative">
                                <input class="uploaderInput weui-uploader__input" type="file" accept="image/*" data-field="image{$vo.id}" data-quantity="comment"/>
                                <img src="__STATIC__/home/images/cuan.png" alt="">
                                <span class="fs06">1/5</span>
                            </a>
                            <input type="hidden" class="img" name="image{$vo.id}_1" value="" />
                            <input type="hidden" class="img" name="image{$vo.id}_2" value="" />
                            <input type="hidden" class="img" name="image{$vo.id}_3" value="" />
                            <input type="hidden" class="img" name="image{$vo.id}_4" value="" />
                            <input type="hidden" class="img" name="image{$vo.id}_5" value="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cells" style="margin-top: 0;">
                <div class="weui-cell shop_grade">
                    <div class="weui-cell__hd">
                        <img src="__STATIC__/home/images/shop.png" alt="">
                    </div>
                    <div class="weui-cell__bd">
                        <span>店铺评分</span>
                    </div>
                </div>
                <div class="weui-cell1">
                    <div class="discuss-xx">
                        <span class="fs07">服务评分</span>
                        <p class="xx">
                            <!--满星星加class为 active-->
                            <a href="1" class="active"></a>
                            <a href="2" class="active"></a>
                            <a href="3" class="active"></a>
                            <a href="4" class="active"></a>
                            <a href="5" class="active"></a>
                            <input type="hidden" name="service_level" value="5" />
                        </p>
                    </div>
                </div>
            </div>
        </div>
        {/volist}
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="is_anonymity" value="">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <span>匿名</span>
            </div>
            <div class="weui-cell__ft">
                <span>您写的评论会以匿名的形式呈现</span>
            </div>
        </div>

        <div class="weui-cell demos-content-padded">
            <a href="javascript:;" class="weui-btn weui-btn_primary send_comment" style="width:100%;">提交</a>
        </div>
    </form>
</div>
{/block}

{block name="javascript"}
<script type="text/javascript" src="__STATIC__/home/jquery_weui/js/swiper.min.js"></script>
{js href="__STATIC__/home/js/jquery.jcrop.min.js" /}
{js href="__STATIC__/home/js/jquery.jcrop.upload.js" /}
{js href="__STATIC__/home/js/exif.js" /}
<script>
    SCOPE.upload_img_type = '2';
    SCOPE.upload_img_max_num = 5;
    $(function () {
        //        星星显示
        $('.xx').on('click','a',function (e) {
            e.preventDefault();
            var that=$(this);
            var count=that.attr('href');
            that.addClass('active').prevAll().addClass('active');
            that.nextAll().removeClass('active');
            that.siblings('input').val(count);
            $('.appear-count').html(count+'分');
        });
//        好评，中评，差评 选择
        $('.discuss-face').on('click','a',function (e) {
            e.preventDefault();
            $(this).addClass('active').siblings().removeClass('active');
        });
        
        // ** 点击发送评论
        $('.send_comment').click(function () {
            var _data = {};
            var _is_error = false;
            $(".product").each(function (i, d) {
                var _this = $(this);
                if (!_this.find('textarea[name="content"]').val()) {
                    $.toptip('请输入评论内容 ');
                    _this.find('textarea[name="content"]').focus();
                    _is_error = true;
                    return false;
                }

                _data[i] = {
                    product_id : _this.data('id'),
                    level : _this.find('.level').find('.active').data('level'),
                    content : _this.find('textarea[name="content"]').val(),
                    service_level : _this.find('input[name="service_level"]').val(),
                    img_1 : _this.find('.viewImage').find('.img').eq(0).val(),
                    img_2 : _this.find('.viewImage').find('.img').eq(1).val(),
                    img_3 : _this.find('.viewImage').find('.img').eq(2).val(),
                    img_4 : _this.find('.viewImage').find('.img').eq(3).val(),
                    img_5 : _this.find('.viewImage').find('.img').eq(4).val(),

                };
            });
            if (!_is_error) {
                $.ajax({
                    url : '{:url("save_comment")}',
                    type : 'post',
                    data : {
                        order_id : '{$data.id}',
                        is_anonymity : $('input[name="is_anonymity"]').prop('checked') ? 1 : 0,
                        comments : _data
                    },
                    dataType : 'json',
                    success : function (msg) {
                        if (msg.code == 200) {
                            $.toptip('评论成功！', 'success');
                            setTimeout(function () {
                                window.location.href = "{:url('order/index')}";
                            }, 888);
                        } else {
                            $.toptip(msg.msg);
                        }
                        console.log(msg);
                    }
                });
            }
        });
    })
</script>
{/block}